<template>
	<div>
		<div class="mineNav">
			<MineNav :navTitle="navTitle" />
		</div>
		<router-link :to="{name:'mineReset'}">
			<img class="leftArrow" src="../../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		<p class="submitPass" @click="xiuGai">修改</p>
		<div class="bangdingsj">
			<div>
				<input type="text" placeholder="请输入绑定的手机号" v-model="telep"/>
			</div>
			<div  class="inputSecond">
				<input type="text" placeholder="请输入验证码" v-model="yanZM"/>
				<p @click.stop="getYZM">获取验证码</p>
			</div>
			<div>
				<input type="password" placeholder="请输入登录密码" v-model="Mypassword"/>
			</div>
		</div>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		 >
		  <span>{{content}}</span>
		</el-dialog>
	</div>
</template>

<script>
	import MineNav from "../../public/mineNav"
	export default {
		components:{
			MineNav
		},
		data(){
			return{
				navTitle:"修改绑定",
				telep:"",
				yanZM:"",
				Mypassword:null,
				dialogVisible:false,
				content:'',
				
			}
		},
		methods:{
			getYZM(){
				this.yanZM = "ghed"
			},
			xiuGai(){
				this.dialogVisible = true;
				var password = localStorage.getItem("password") || 0
				var reg = /^\d{11}$/
				if(reg.test(this.telep)){
				    if(this.yanZM.length){
				    	if(this.Mypassword){
				    		if(!password){
				    			this.content="还未登录"
				    			this.Mypassword=null
				    		}else{
				    			if(this.Mypassword == password){
					    			this.content="绑定成功"
					    			setTimeout(function(){
					    				history.back();
					    			},1000)
					    		}else{
					    			this.content="密码不正确"
					    			this.Mypassword=null
					    		}
				    		}
				    	}else{
				    		this.content="密码不能为空"
				    		this.Mypassword=null
				    	}
				    }else{
				       this.content="验证码不能为空"
				       this.yanZM=""
				    }
				}else{
					this.content="电话号码为11位数字"
					this.telep=""
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.mineNav {
		height: 88/@current;
	}
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.submitPass{
		position: fixed;
		top: 23/@current;
		right: 40/@current;
		z-index: 333;
		font-size:32/@current;
		color:white;
	}
	.submitPass{
		position: fixed;
		top: 23/@current;
		right: 40/@current;
		z-index: 333;
		font-size:32/@current;
		color:white;
	}
	.bangdingsj{
		width:600/@current;
		margin-left:20/@current;
		div{
			width:100%;
			height:77/@current;
			margin-top:20/@current;
			input{
			   width:583/@current;
			   height:75/@current;	
			   border:1/@current solid #d1cbdc;
			   border-radius: 10/@current;
			   transform: translateY(-52/@current);
			   font-size:32/@current;
			   color:#b0a9ba;
			   padding-left:15/@current;
			}
		}
		.inputSecond{
				input{
				   float:left;
				   width:310/@current;
                   height:75/@current;	
				   border:1/@current solid #d1cbdc;
				   border-radius: 10/@current;
				   transform: translateY(5/@current);
				   font-size:32/@current;
				   color:#b0a9ba;
				   padding-left:15/@current;
				}
				p{
				   width:250/@current;	
				   float:right;
				   height:75/@current;
				   line-height:75/@current;
				   border:1/@current solid #A54BE8;
				   border-radius: 10/@current;
				   transform: translateY(5/@current);
				   font-size:32/@current;
				   color:#A54BE8;
				   text-align:center;
				}
		}
		
	}
</style>